<template>
  <div>
    <el-card>
      <el-table :data="skuTable" style="width: 100%; margin-bottom: 20px">
        <el-table-column fixed type="index" label="序号" width="150" />
        <el-table-column prop="skuName" label="名称" width="120" show-overflow-tooltip />
        <el-table-column prop="skuDesc" label="描述" width="120" show-overflow-tooltip />
        <el-table-column prop="skuDefaultImg" label="图片" width="120">
          <template #="{ row }">
            <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量" width="120" />
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="{ row }">
            <el-button v-has="'btn.Sku.updown'" v-if="row.isSale == 0" type="primary" size="small" icon="Top" @click="beOnSale(row)"></el-button>
            <el-button v-has="'btn.Sku.updown'" v-else type="warning" size="small" icon="Bottom" @click="beOnUnsale(row)"></el-button>
            <el-button v-has="'btn.Sku.detail'" type="primary" size="small" icon="Search" @click="watchSkuData(row)"></el-button>
            <el-button v-has="'btn.Sku.remove'" type="danger" size="small" icon="Delete" @click="deleteSku(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 7, 9]" :small="small" :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="getSku" />
    </el-card>

    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="商品详情">
      <div style="margin-bottom: 10px">
        <span>名称</span> <span style="padding-left: 10px; font-size: 12px">{{ skuSpecific.skuName }}</span>
      </div>
      <div style="margin-bottom: 10px">
        <span>描述</span> <span style="padding-left: 10px; font-size: 12px">{{ skuSpecific.skuDesc }}</span>
      </div>
      <div style="margin-bottom: 10px">
        <span>价格</span> <span style="padding-left: 10px; font-size: 12px">{{ skuSpecific.price }}</span>
      </div>
      <div style="margin-bottom: 10px">
        <span>平台属性</span> <el-tag v-for="item in skuSpecific.skuAttrValueList" type="success">{{ item.attrName }}</el-tag>
      </div>
      <div style="margin-bottom: 10px">
        <span>销售属性</span> <el-tag v-for="item in skuSpecific.skuSaleAttrValueList" type="warning">{{ item.saleAttrName }}</el-tag>
      </div>
      <div>
        <span>图片</span>
        <div style="margin-top: 40px">
          <el-carousel height="200px">
            <el-carousel-item v-for="item in skuSpecific.skuImageList" :key="item.id">
              <img style="object-fit: contain" :src="item.imgUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { reqSkuList, reqSaleSku, reqCancelSale, reqSkuInfo, reqRemoveSku } from '@/utils/api/product/sku'
import { SkuData } from '@/utils/api/product/sku/type'
import { onMounted, reactive, ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref<number>(5)
const small = ref(false)
const total = ref<number>(0)

// sku表格数据
const skuTable = ref<SkuData[]>([])
// sku商品具体信息
const skuSpecific: SkuData = reactive({})
// 抽屉的显示与隐藏
const drawer = ref(false)

onMounted(() => {
  getSku()
})

// 获取sku的数据
const getSku = async (page = 1) => {
  currentPage.value = page
  const res = await reqSkuList(currentPage.value, pageSize.value)
  if (res.data.code === 200) {
    skuTable.value = res.data.data.records
    total.value = res.data.data.total
  }
}

// 分页器每页展示条数改变
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getSku()
}

// 上架
const beOnSale = async (row: SkuData) => {
  const res = await reqSaleSku(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('上架成功')
    getSku(currentPage.value)
  }
}

// 下架
const beOnUnsale = async (row: SkuData) => {
  const res = await reqCancelSale(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('下架成功')
    getSku(currentPage.value)
  }
}

// 获取商品详情信息
const watchSkuData = async (row: SkuData) => {
  const res = await reqSkuInfo(row.id!)
  if (res.data.code == 200) {
    Object.assign(skuSpecific, res.data.data)
    drawer.value = true
  }
}

// 删除sku
const deleteSku = async (row: SkuData) => {
  const res = await reqRemoveSku(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('删除成功')
    getSku(currentPage.value)
  }
}
</script>

<style scoped></style>
